<template>
  <div class="app-container">
    <el-card shadow="never" class="mb-3">
      <el-form ref="searchFormRef" :inline="true" class="mt-2.5" label-width="auto">
        <el-form-item prop="username" v-for="(item, index) in s1" :key="index" :label="item">
          <el-input placeholder="请选择" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" class="">
      <div class="toolbar-wrapper mb-3">
        <el-button type="primary" @click="dialogVisible = true">新建公告</el-button>
      </div>
      <el-table :data="tableData">
        <!-- <el-table-column type="selection" width="50" align="center" /> -->
        <el-table-column type="index" label="序" width="50" />
        <el-table-column v-for="(item, index) in s1" :key="index" :prop="'name' + index" :label="item" />
        <el-table-column label="备注" />

        <el-table-column fixed="right" label="操作" align="center">
          <el-button type="primary" text bg size="small">修改</el-button>
          <!-- <el-button type="danger" text bg size="small">删除</el-button> -->
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialogVisible" title="新建" width="30%">
      <el-form ref="formRef" :rules="formRules" label-width="auto">
        <el-form-item prop="username" v-for="(item, index) in s1" :key="index" :label="item">
          <el-input placeholder="请输入" />
        </el-form-item>
        <el-form-item label="上传照片">
          +
          <!-- <el-input placeholder="请输入" /> -->
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary">新建</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue"

// const s1 = ["发运清单", "内向交货单号", "发运时间", "发运地点", "供方名称", "送达日期", "采购人", "备注"]
const s1 = [
  '公告名称',
  '公告内容',
  '发布人',
  '发布时间',
]
const formRules = {
  username: [{ required: true, trigger: "blur", message: "请输入" }]
}
const dialogVisible = ref(false)
const tableData = [ ]
for (let i = 0; i < 10; i++) {
  tableData.push({
    name0: "打扫",
    name1: "注意环境卫生",
    name2: "张三",
    name3: "2024-04-04 07:28:35",
  })
}
</script>
<style lang="scss" scoped></style>
